<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="shortcut icon" href="/resources/favicon.ico"
	type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="/resources/styles.css">
<script type="text/javascript" src="resources/jquery-1.7.2.min.js"></script>
<title>Homegrown Cuisine - Login / Register User</title>
</head>
<body background="">
		<form action="YourActionHere" name="myForm" id="myForm">
			<input type="radio" name="type" value="setLogin" checked>login <input type="radio"
				name="type" value="register">register<br>

		</form>
<div id="loginDiv">
	<h1>Login User</h1>

	<a href="/">Back</a>

	<div id="userAccountDiv">
		<h2></h2>
		<%-- <p>${message}</p>
		<form:form method="POST"  modelAttribute="userAccount"
			name="loginForm" action="/login;jsessionid=m6zv2e81aq0s">

			<table id="loginTable">
				<tr>
					<td>Email address:</td>
					<td><form:input path="accountName" id="loginAccountName" /></td>
				</tr>
				<tr>
					<td>Password:</td>
					<td><form:input path="passcode" type="password" id ="loginPassword" /></td>
				</tr>
				<tr>
					<td colspan="2"><input type="submit" value="Login"  /></td>
				</tr>

			</table>
		</form:form> --%>
		<form name="f" action="/admin/j_spring_security_check" method="POST">
	      <table>
	        <tr><td>User:</td><td><input type='text' name='j_username' value='<c:if test="${not empty param.login_error}"><c:out value="${SPRING_SECURITY_LAST_USERNAME}"/></c:if>'/></td></tr>
	        <tr><td>Password:</td><td><input type='password' name='j_password'></td></tr>		        
	        <tr><td colspan='2'><input name="submit" type="submit" title="Login"></td></tr>
	        <tr><td colspan='2'><input name="reset" type="reset"></td></tr>
	      </table>
   		</form>
	</div>
</div>
<div id="registerDiv" style="display:none;">
	<h1>Register User</h1>

	<a href="/">Back</a>

	<div id="userAccountDiv">
		<h2></h2>
		<p>${message}</p>


		<form:form method="POST"  modelAttribute="userAccount"
			name="registerForm" action="/addUserAccount;jsessionid=m6zv2e81aq0s">

			<table id="registerTable">
				<tr>
					<td>Nickame:</td>
					<td><form:input path="nickName" id="nickName" /></td>
				</tr>
				<tr>
					<td>Surname:</td>
					<td><form:input path="surName" id="surName" /></td>
				</tr>
				<tr>
					<td>Givenname:</td>
					<td><form:input path="givenName" id="givenName" /></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><form:input path="accountName" id="accountName" /></td>
				</tr>
				<tr>
					<td>Password:</td>
					<td><form:input path="passcode" type="password" id="passcode" /></td>
				</tr>
				<tr>
					<td>Retype Password:</td>
					<td><input name="retypePassword" type="password" id="retypePassword" /></td>
				</tr>

				<tr>
					<td colspan="2"><input type="submit" value="Register"  /></td>
				</tr>




			</table>
		</form:form>
	</div>
</div>
</body>
 <script type="text/javascript">
	$(document)
			.ready(
					function() {
						$('input[value=setLogin]').click(function(){
							$('#loginDiv').show();
							$('#registerDiv').hide()
						})
						$('input[value=register]').click(function(){
							$('#loginDiv').hide();
							$('#registerDiv').show()
						})
						$('input:submit[title=Login]')
								.click(
										function(event) {
											$('.errorLoginMail').hide();
											$('.errorLoginPasscode').hide();
											
											var loginName = $('input[name=j_username]');
											var loginPassword = $('input[name=j_password]');
											
											// Validating loginName
											if (loginName.val() == '') {
												loginName
														.after('<span class="errorLoginMail" style="color:red;">Please enter your login name.</span>');
												event.preventDefault();
											}
											
											// Validating loginPassword
											if (loginPassword.val() == '') {
												loginPassword
														.after('<span class="errorLoginPasscode" style="color:red;">Please enter your password.</span>');
												event.preventDefault();
											}

										})
						$('input:submit[value=Register]')
								.click(
										function(event) {
											$('.errorMail').hide();
											$('.errorPasscode').hide();
											$('.errorNick').hide();
											$('.errorSur').hide();
											$('.errorGiven').hide();
											$('.errorRetype').hide();

											var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

											var nicknameField = $('#nickName');
											var surnameField = $('#surName');
											var givennameField = $('#givenName');
											var emailaddressField = $('#accountName');
											var passcodeField = $('#passcode');
											var retypeField = $('#retypePassword')

											// Validating Nickname
											if (nicknameField.val() == '') {
												nicknameField
														.after('<span class="errorNick" style="color:red;">Please enter a nickname.</span>');
												event.preventDefault();
											}
											
											// Validating Surname
											if (surnameField.val() == '') {
												surnameField
														.after('<span class="errorSur" style="color:red;">Please enter your surname.</span>');
												event.preventDefault();
											}
											
											// Validating Givenname
											if (givennameField.val() == '') {
												givennameField
														.after('<span class="errorGiven" style="color:red;">Please enter your givenname.</span>');
												event.preventDefault();
											}

											// Validating Email (Accountname)
											if (emailaddressField.val() == '') {
												emailaddressField
														.after('<span class="errorMail" style="color:red;">Please enter your email address.</span>');
												event.preventDefault();
											} else if (!emailReg
													.test(emailaddressField
															.val())) {
												emailaddressField
														.after('<span class="errorMail" style="color:red;">Enter a valid email address.</span>');
												event.preventDefault();
											}

											// Validating Password
											if (passcodeField.val() == '') {
												passcodeField
														.after('<span class="errorPasscode" style="color:red;">Please enter a password.</span>');
												event.preventDefault();
											} else if (passcodeField.val().length < 8) {
												passcodeField
														.after('<span class="errorPasscode" style="color:red;">Password needs to be at least 8 characters.</span>');
												event.preventDefault();
											}
											
											if(retypeField.val() != passcodeField.val()){
												retypeField
														.after('<span class="errorRetype" style="color:red;">Password does not match</span>');
												event.preventDefault();
														
											}
										})
					});
</script>
</html>
